<!-- INSPIRED BY BRAD TRAVERSY CHAT APP -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
      integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>WebCage Chat App</title>
  </head>
  <body>
    <div class="join-container">
      <header class="join-header">
        <h1><i class="fas fa-kiwi-bird"></i> WebCage</h1>
      </header>
      <main class="join-main">
        <form action="chat.html">
          <div class="form-control">
            <label for="email">Email Address</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="Enter email address..."
              required
            />
          </div>

          <div class="form-control">
            <label for="username">Username</label>
            <input
              type="text"
              name="username"
              id="username"
              placeholder="Enter username..."
              required
            />
          </div>
          <div class="form-control">
            <label for="room">Chat Channel</label>
            <select name="room" id="room">
              <option value="Business">Business</option>
              <option value="Technology">Technology</option>
              <option value="Sport">Sports</option>
              <option value="news">International News</option>
              <option value="cats">Just Cats</option>
            </select>
          </div>
          <div class="flex">
            <button type="submit" class="btn">Login to Chat</button>
          </div>
        </form>
      </main>
    </div>
  </body>
</html>
